<template>
  <el-dialog title="选择产品编号" v-model="dialogVisible" width="80%" style="margin-top: 40px;">
    <el-form
      ref="formRef"
      :model="queryParams"
      label-width="110px"
      :inline="true"
    >
      <el-form-item label="订单号" prop="orderNumber">
        <el-input @keyup.enter="getList" class="!w-220px" v-model="queryParams.orderNumber" placeholder="请输入订单号" />
      </el-form-item>
      <el-form-item label="产品编号" prop="productNumber">
        <el-input @keyup.enter="getList" class="!w-220px"  v-model="queryParams.productNumber" placeholder="请输入产品编号" />
      </el-form-item>
      <el-form-item>
        <el-button @click="getList" type="primary"> 搜索</el-button>
        <el-button @click="resetQuery"> 重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      v-loading="formLoading"
      ref="multipleTableRef"
      :data="list"
      @selection-change="handleSelectionChange"
      :height="contentHeight * 0.75"
      row-key="productNumber"
    >
      <el-table-column type="selection" align="center" :reserve-selection="true" />
      <el-table-column type="index" label="序号" align="center" />
      <el-table-column 
        v-for="item, index in TableTitleList" 
        :key="index" 
        :label="item.label"
        :header-align="item.headerAlign" 
        :align="item.align" 
        :prop="item.field" 
        min-width="200px" 
      >
        <template #default="scope">
          <!-- 字典翻译 -->
          <dict-tag v-if="item.dictType" :type="item.dictType" :value="scope.row[item.field]" />
          <div v-else>{{ scope.row[item.field] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import * as ComponentApi from '@/api/componentApi/index'
const message = useMessage() // 消息弹窗

defineProps({
  contentHeight: {
    type: Number,
    default: 0
  }
})

const queryParams = reactive({
  orderNumber: undefined,
  productNumber: undefined
})

const formLoading = ref(false)
const dialogVisible = ref(false)
const multipleSelection = ref([]) //多选值
const list = ref([])  //列表值
const formRef = ref()
const multipleTableRef = ref()
const editIndex = ref(0)

const TableTitleList = [
  {
    label: '订单号',
    field: 'orderNumber',
    headerAlign: 'left',
    align: 'left'
  },
  {
    label: '客户名称',
    field: 'customerName',
    headerAlign: 'left',
    align: 'left'
  },
  {
    label: '订单类型',
    field: 'dictOrderType',
    headerAlign: 'left',
    align: 'left',
    dictType: 'market_order_type'
  },
  {
    label: '产品编号',
    field: 'productNumber',
    headerAlign: 'left',
    align: 'left'
  },
  {
    label: '产品名称',
    field: 'productName',
    headerAlign: 'left',
    align: 'left'
  },
  {
    label: '订单数量',
    field: 'orderQuantity',
    headerAlign: 'left',
    align: 'left'
  },
  {
    label: '状态',
    field: 'dictStatus',
    headerAlign: 'left',
    align: 'left',
    dictType: 'order_task_book_status'
  }
]

// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const open = async (arr, index) => {
  dialogVisible.value = true
  editIndex.value = index
  await getList()
  nextTick(() => {
    list.value.map(item => {
      if (item['productNumber'] === arr['productNumber']) {
        multipleTableRef.value.toggleRowSelection(item, true)
      }
    })
  })
}

defineExpose({ open })

// 获取数据
const getList = async () => {
  list.value = await ComponentApi.getMarketingShippingNoteProduct(queryParams)
}

// 重置
const resetQuery = () => {
  formRef.value.resetFields()
  multipleSelection.value = []
  multipleTableRef.value!.clearSelection()
}

// 确定
const emits = defineEmits(['setProduct'])
const submitForm = () => {
  if (multipleSelection.value.length > 1) {
    message.notifyError('只能选择一条数据')
    return
  }
  emits('setProduct', multipleSelection.value, editIndex.value)
  dialogVisible.value = false
  resetQuery()
}
</script>